<template>
    <div>
        <Row>
           
            <Button type="primary" style="float:right">新增</Button>
            </Card>
            </Col>
        </Row>

        <div style="margin-top:10px;">

    	<table-temp   :columnsList="columnsList" v-model="UserList" >
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="total" :page-size='pagesize' :current="page" show-elevator show-total @on-change="changePage"></Page>
                </div>
            </div>
    	</table-temp>
        </div>

    </div>
</template>


<script>
    import TableTemp from "../common/layout/table-temp.vue"
    
    export default {
        components: {
            TableTemp,
        },
        data () {
            return {
                UserList: [],
                columnsList: [
                    {
                        title: 'id',
                        key: 'id',
                        align: 'center'
                        
                    },
                     {
                        title: '服务名字',
                        key: 'payment_name',
                        align: 'center'

                    },
                    {
                        title: '服务类型',
                        key: 'payment',
                        align: 'center'
                    },
                    {
                        title: '订单类型',
                        key: 'payment',
                        align: 'center'
                    },              
                    {
                    title: '状态',
                    key: 'state',
                    align: 'center',
                    render: (h, params) => {
                    const row = params.row
                    const state = row.state === '0' ? '正常' : row.state === '1' ? '关闭' : '未知'
                    return h('Button', {
                        props: {
                            type: 'default',
                            size: 'small'
                            }
                        }, state);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'handle',
                        handle: ['edit','delete']
                    }
                ],
                modalShow:false,
                detailShow: false,
                page: 1,
                pagesize: 30,
                total: 0,  
                propsData: {},
                
            }
        },

        created () {
            this.fetchData();
        },
        methods:{
            fetchData(){
                var _this = this;
                this.$axios.get(process.env.API_HOST+'/service/list',{ params: { page: this.page, pagesize: this.pagesize } }).then(function(response) {
                    if (response.data.code !== 0) {
                        _this.$Message.error(response.data.msg);
                        return false;
                    }else{
                        _this.UserList = response.data.data.list;
                        _this.total = parseInt(response.data.data.count);
                        
                    }
                    }).catch(function(err) {
                        console.log(err);
                    });
            },
            changePage (page) {
                this.page = page;            
                this.fetchData();
            },
        },
    }
</script>
